---
layout: example
categories: example/v1.0.0
version: v1.0.0
title: Leaflet-MiniMap
description: Display a smaller navigable map using the Leaflet-MiniMap plugin.
tags:
  - plugins
---
<script src='{{site.tileApi}}/mapbox.js/plugins/leaflet-minimap/v1.0.0/Control.MiniMap.js'></script>
<link href='{{site.tileApi}}/mapbox.js/plugins/leaflet-minimap/v1.0.0/Control.MiniMap.css' rel='stylesheet' />

<div id='map'></div>

<script>
  var mapboxTiles = L.tileLayer('{{site.tileApi}}/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=' + L.mapbox.accessToken, {
         attribution: '© <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  });

  var mapboxTiles2 = L.tileLayer('{{site.tileApi}}/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=' + L.mapbox.accessToken, {
         attribution: '© <a href="https://www.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  });

  var bigMap = mapboxTiles;
    
  var map = L.map('map')
    .addLayer(bigMap)
    .setView([0, 0], 2);
    
  var littleMap = mapboxTiles2;

  var miniMap = new L.Control.MiniMap(littleMap).addTo(map);
</script>
